<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
    <link rel="stylesheet" href="./style/index.css">
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <div class="todo-container">
        <div class="todo-wrap">
            <!--     方案一       -->
<!--                        <todo-header :add-task="addTask"></todo-header>-->
                方案二
            <todo-header :task-list.sync="taskList"></todo-header>
            <todo-main :task-list="taskList"></todo-main>
            <todo-footer></todo-footer>
        </div>
    </div>
</div>

</body>
<script type="module">
    import TodoHeader from "./components/TodoHeader.js";
    import TodoMain from "./components/TodoMain.js";
    import TodoFooter from "./components/TodoFooter.js";
    new Vue({
        el:"#root",
        data:{
            taskList:[
                {
                    id:Math.random().toString(36).slice(2),
                    title:"金庸",
                    isChecked:true
                },{
                    id:Math.random().toString(36).slice(2),
                    title:"古龙",
                    isChecked:false
                }
            ]
        },
        methods:{
            addTask(e){
                const title = e.target.value.trim();
                if(title){
                    this.taskList = [
                        {
                            id:Math.random().toString(36).slice(2),
                            title,
                            isChecked:true
                        },
                        ...this.taskList
                    ];
                    e.target.value = null;
                }else{
                    alert("请输入任务标题！")
                }
            }
        },
        components:{
            TodoHeader,
            TodoMain,
            TodoFooter
        }
    })
</script>
</html>
